<template>
  <div id="globalHeader">
    <a-row
      class="grid-demo"
      style="backgroundcolor: var(--color-fill-2)"
      align="center"
      :wrap="false"
    >
      <a-col :span="20">
        <a-menu mode="horizontal" :default-selected-keys="selectRoute">
          <a-menu-item key="0" :style="{ padding: 0 }" disabled>
            <div class="title-bar">
              <img class="logo" src="../assets/oj.png" />
              <div class="title">童趣编程</div>
            </div>
          </a-menu-item>
          <a-menu-item
            v-for="route in visibleRoute"
            :key="route.path"
            @click="doClickEvent(route.path)"
            ><i :class="`iconfont ${route.meta?.icon}`" /> {{ route.name }}
          </a-menu-item>
        </a-menu>
      </a-col>
      <a-col
        :span="4"
        v-if="loginUser?.userRole != userRole.NOT_LOGIN"
        align="center"
      >
        <a-row align="center" :wrap="false">
          <a-col :span="24" class="flex-box">
            <a-popover position="br">
              <span
                style="height: 40px; width: 40px; cursor: pointer"
                @click="goToMyView"
                ><img
                  class="avatar"
                  v-if="loginUser.userAvatar == ''"
                  style="height: 100%; width: 100%; cursor: pointer"
                  alt="avatar"
                  src="../assets/default.png" />
                <img
                  class="avatar"
                  v-else
                  style="height: 100%; width: 100%; cursor: pointer"
                  alt="avatar"
                  :src="loginUser.userAvatar"
              /></span>
              <template #content>
                <p @click="goToMyView" style="cursor: pointer">个人主页</p>
              </template>
            </a-popover>
            <div class="content">
              <span style="font-size: 15px"
                ><i
                  class="iconfont icon-jinbi"
                  style="color: #ffc53d; font-size: 20px"
                />{{ loginUser.integral }}</span
              >
            </div>
            <a-button size="medium" status="warning" @click="logout"
              >登出
            </a-button>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="4" v-else align="center">
        <a-button
          type="primary"
          size="medium"
          style="border: 1px solid grey"
          @click="router.push('/login')"
          >登录
        </a-button>
        <a-divider direction="vertical" />
        <a-button
          type="text"
          size="medium"
          status="warning"
          @click="router.push('/register')"
          >注册
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>
<script setup lang="ts" name="globalHeader">
import { routes } from "@/router/routes";
import { useRouter } from "vue-router";
import { useUser } from "@/store/user";
import { storeToRefs } from "pinia";
import checkRole from "@/access/checkPermission";
import { computed } from "vue";
import userRole from "@/access/permissionEnum";
import { LoginUserVO, UserControllerService } from "../../generated";
import message from "@arco-design/web-vue/es/message";
import moment from "moment";

let user = useUser();
let { loginUser, defaultRoutes } = storeToRefs(user);
let selectRoute = defaultRoutes;
let router = useRouter();
const doClickEvent = (key: string) => {
  router.push({ path: key });
};
let visibleRoute = computed(() => {
  return routes.filter((item, index) => {
    if (item.meta?.isHide) {
      return false;
    }
    return checkRole(loginUser.value, item.meta?.access as string);
  });
});

const logout = async () => {
  let cancelablePromise = await UserControllerService.userLogoutUsingPost();
  if (cancelablePromise.code == 0 && cancelablePromise.data == true) {
    message.success("你的账户已退出,当前为未登录");
    loginUser.value = {
      createTime: "",
      id: 12,
      updateTime: "",
      userAccount: "",
      userAvatar: "",
      userName: "",
      userProfile: "",
      userRole: userRole.NOT_LOGIN,
    } as LoginUserVO;
    await router.push("/login");
  } else {
    message.error("你已经退出登录了");
    loginUser.value.userRole = userRole.NOT_LOGIN;
  }
};

const goToMyView = () => {
  router.push("/mine");
};
</script>
<style scoped>
#globalHeader {
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid #dee2e6;
  font-size: 10px;
  z-index: 100;
}

.title-bar {
  display: flex;
  align-items: center;
}

.title {
  color: #444;
  margin-left: 16px;
}

.logo {
  height: 60px;
}

.userName {
  color: black;
  font-size: 15px;
  font-width: bolder;
  margin-left: 20px;
  line-height: 50px;
}

.divider-demo {
  box-sizing: border-box;
  width: 560px;
  padding: 24px;
  border: 30px solid rgb(var(--gray-2));
}

.half-divider {
  left: 55px;
  width: calc(100% - 55px);
  min-width: auto;
  margin: 16px 0;
}

.flex-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-box .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 16px;
  color: var(--color-text-2);
  font-size: 16px;
  background-color: var(--color-fill-3);
  border-radius: 50%;
}

.flex-box .content {
  flex: 1;
  color: var(--color-text-2);
  font-size: 12px;
  line-height: 20px;
}
</style>
